<!DOCTYPE html>
<html>
<head>
    <title i18n="options_settings"></title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=1024, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="css/main.css">
    <link type="text/css" rel="stylesheet" href="../lib/content-script/css/alert-popup.css">

    <script type="text/javascript" src="../lib/libs/moment-with-locales.js"></script>
    <script type="text/javascript" src="../lib/libs/ace/ace.js"></script>
    <script type="text/javascript" src="../lib/libs/ace/mode-adguard.js"></script>
    <script type="text/javascript" src="../lib/content-script/adguard-content.js"></script>
    <script type="text/javascript" src="../lib/content-script/common-script.js"></script>
    <script type="text/javascript" src="../lib/content-script/content-script.js"></script>
    <script type="text/javascript" src="../lib/content-script/content-utils.js"></script>
    <script type="text/javascript" src="../lib/content-script/i18n-helper.js"></script>
    <script type="text/javascript" src="../lib/pages/i18n.js"></script>
    <script type="text/javascript" src="../lib/pages/script.js"></script>
    <script type="text/javascript" src="../lib/pages/options.js"></script>
    <link rel="shortcut icon" href="images/favicon.ico"/>
</head>
<body>
<div class="settings-wrap">

    <div class="wlimit">

        <div class="settings-sidebar">
            <div class="logo"><img src="images/logo.svg" alt=""></div>
            <ul class="nav nav-tabs">
                <li>
                    <a href="#" class="nav__item" data-tab="#general-settings">
                        <span i18n="options_general_settings"></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#antibanner">
                        <span i18n="options_antibanner"></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#privacy">
                        <span i18n="options_privacy"></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#whitelist">
                        <span i18n="options_whitelist"></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#userfilter">
                        <span i18n="options_userfilter"></span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#miscellaneous-settings">
                        <span i18n="options_miscellaneous_settings"></span>
                    </a>
                </li>
                <!--SYNC TAB IS HIDDEN FOR NOW-->
                <li style="display: none">
                    <a href="#" class="nav__item" data-tab="#sync">
                        <span>
                            Sync
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#" class="nav__item" data-tab="#about">
                        <span>
                            <span i18n="options_about"></span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div id="general-settings" class="settings-content tab-pane">
            <div class="page-title" i18n="options_general_settings_title"></div>
            <div class="settings-body">
                <div class="subtitle settings-body-subtitle" i18n="options_general_settings"></div>
                <ul class="opts-list">
                    <li class="active">
                        <div class="opt-desc">
                            <label tabindex="0" for="allowAcceptableAds" class="title" i18n="options_allow_acceptable_ads"></label>
                            <div class="opt-state">
                                <div class="sp-table-row-info desc">
                                    <a class="opt-state__link" href="https://adguard.com/forward.html?action=self_promotion&from=options_screen&app=browser_extension" target="_blank" i18n="options_learn_more"></a>
                                </div>
                            </div>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="allowAcceptableAds"/>
                            </div>
                        </div>
                    </li>
                    <li class="active">
                        <div class="opt-desc">
                            <label tabindex="0" for="showPageStatisticCheckbox" class="title" i18n="options_show_blocked_ads_count"></label>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="showPageStatisticCheckbox"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="autodetectFiltersCheckbox" class="title" i18n="options_enable_autodetect_filter"></label>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="autodetectFiltersCheckbox"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="filtersUpdatePeriodSelect" class="title" i18n="options_set_update_interval"></label>
                        </div>
                        <select class="opt-select" id="filtersUpdatePeriodSelect"></select>
                    </li>
                </ul>

                <div class="subtitle settings-body-subtitle" i18n="options_safebrowsing"></div>
                <ul class="opts-list">
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="safebrowsingEnabledCheckbox" class="title" i18n="options_safebrowsing_enabled"></label>
                            <div class="opt-state">
                                <div class="sp-table-row-info desc">
                                    <a class="opt-state__link" href="https://adguard.com/forward.html?action=protection_works&from=options_screen&app=browser_extension" target="_blank" i18n="options_learn_more"></a>
                                </div>
                            </div>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="safebrowsingEnabledCheckbox"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="sendSafebrowsingStatsCheckbox" class="title" i18n="options_safebrowsing_help"></label>
                            <div class="opt-state">
                                <div class="sp-table-row-info desc" i18n="options_safebrowsing_help_desc"></div>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="sendSafebrowsingStatsCheckbox"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="settings-actions">
                <a href="/pages/export.html#exs" target="_blank" id="exportSettingsFile" class="button button--green button--link" i18n="options_export_settings"></a>
                <input type="file" id="importSettingsFileInput" style="display: none;"/>
                <a href="#" id="importSettingsFile" i18n="options_import_settings" class="button button--green-bd button--link"></a>
            </div>
        </div>

        <div id="add-custom-filter-popup" class="option-popup">
            <div class="option-popup__in">
                <div id="custom-filter-popup-close" class="option-popup__cross"></div>
                <div id="add-custom-filter-step-1" class="option-popup__step">
                    <div class="option-popup__title"
                         i18n="options_popup_new_filter_subscription">
                    </div>
                    <div class="option-popup__content">
                        <input id="custom-filter-popup-url"
                               type="text"
                               class="option-popup__input"
                               i18n-plhr="options_popup_url_placeholder">
                        <div class="option-popup__desc"
                             i18n="options_popup_call_to_action">
                        </div>
                        <div class="option-popup__desc"
                             i18n="options_popup_description">
                        </div>
                    </div>
                    <div class="option-popup__btns option-popup__btns--sb">
                        <button class="button button--green custom-filter-popup-next"
                                i18n="options_popup_next_button">
                        </button>
                    </div>
                </div>
                <div id="add-custom-filter-step-2" class="option-popup__step">
                    <div class="option-popup__content">
                        <div class="load option-popup__load"></div>
                        <div class="option-popup__desc option-popup__desc--tac"
                             i18n="options_popup_checking_filter">
                        </div>
                    </div>
                </div>
                <div id="add-custom-filter-step-3" class="option-popup__step">
                    <div class="option-popup__content">
                        <div class="option-popup__subtitle"
                             i18n="options_popup_check_false_title">
                        </div>
                        <div class="custom-filter-error-message option-popup__desc option-popup__desc--false option-popup__desc--tac"
                             i18n="options_popup_check_false_description">
                        </div>
                    </div>
                    <div class="option-popup__btns option-popup__btns--center">
                        <button class="button button--transparent custom-filter-popup-try-again"
                                i18n="options_popup_try_again_button"></button>
                    </div>
                </div>
                <div id="add-custom-filter-step-4" class="option-popup__step">
                    <div class="option-popup__title" i18n="options_popup_new_filter_subscription">
                    </div>
                    <div class="option-popup__content">
                        <div class="option-popup__table">
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_title"></div>
                                <input id="custom-filter-popup-added-title" type="text" class="option-popup__input" i18n-plhr="options_popup_title_placeholder" placeholder="Enter a filter name">
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_description"></div>
                                <div id="custom-filter-popup-added-desc" class="option-popup__table-cell">
                                </div>
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_version"></div>
                                <div id="custom-filter-popup-added-version" class="option-popup__table-cell">
                                </div>
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_rules_count"></div>
                                <div id="custom-filter-popup-added-rules-count" class="option-popup__table-cell">
                                </div>
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_homepage"></div>
                                <div class="option-popup__table-cell">
                                    <a class="option-popup__url" id="custom-filter-popup-added-homepage" href="#" target="_blank">
                                    </a>
                                </div>
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__table-cell" i18n="options_popup_filter_url"></div>
                                <div class="option-popup__table-cell">
                                    <a class="option-popup__url" id="custom-filter-popup-added-url" href="#" target="_blank">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="option-popup__checkbox">
                            <div class="option-popup__table-row">
                                <input class="settings-checkboxes__checkbox"
                                       id="custom-filter-popup-trusted"
                                       type="checkbox">
                                <label class="settings-checkboxes__label"
                                       for="custom-filter-popup-trusted"
                                       i18n="options_popup_trusted_filter_title">
                                </label>
                            </div>
                            <div class="option-popup__table-row">
                                <div class="option-popup__desc" i18n="options_popup_trusted_filter_description"></div>
                            </div>
                        </div>
                    </div>
                    <div class="option-popup__btns option-popup__btns--sb">
                        <button id="custom-filter-popup-added-subscribe"
                                class="button button--green"
                                i18n="options_popup_subscribe_button">
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div id="antibanner" class="settings-content tab-pane">
            <div class="settings-content">
                <div class="page-title">
                    <div class="info info--rules-current" id="updateAntiBannerFilters">
                        <span id="filtersRulesInfo"></span>
                        <div id="lastUpdateTime" class="upd"></div>
                        <div class="settings-actions settings-actions--update-filters">
                            <a href="#" class="settings-actions__update-button" i18n-title="options_update_antibanner_filters"></a>
                        </div>
                    </div>
                    <span i18n="options_antibanner"></span>
                </div>
                <div class="settings-body">
                    <ul id="groupsList" class="opts-list ad-blocker"></ul>
                    <ul id="filtersList" class="opts-list opts-list--filters" style="display: none"></ul>
                </div>
            </div>
            <div class="filters-check">
                <div class="filters-check__in">
                    <a href="#" class="btn btn--inline">
                        Check for filters update
                    </a>
                </div>
                <div class="filters-check__in filters-check__in--upload">
                    <div class="filters-check__ico filters-check__ico--0"></div>
                    <div class="filters-check__label">
                        Check for filters update
                    </div>
                </div>
            </div>
        </div>

        <div id="privacy" class="settings-content tab-pane">
            <div class="page-title" i18n="options_privacy_title"></div>
            <div class="settings-body">
                <ul class="opts-list">
                    <li class="active">
                        <div class="opt-desc">
                            <label tabindex="0" for="disable_stealth_mode" class="title" i18n="options_privacy_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_privacy_desc"></span>
                            </div>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="disable_stealth_mode"/>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="subtitle settings-body-subtitle" i18n="options_cookies_title"></div>
                <ul class="opts-list" id="cookies-stealth-options">
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="third_party_cookies" class="title" i18n="options_third_party_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_third_party_desc"></span>
                            </div>
                            <input type="number" min="0" class="opt-input" id="third_party_time" placeholder="Time (minutes)">
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="third_party_cookies"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="first_party_cookies" class="title" i18n="options_first_party_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_first_party_desc"></span>
                            </div>
                            <input type="number" min="0" class="opt-input" id="first_party_time" placeholder="Time (minutes)">
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="first_party_cookies"/>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="subtitle settings-body-subtitle" i18n="options_miscellaneous_title"></div>
                <ul class="opts-list" id="miscellaneous-stealth-options">
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="hide_referrer" class="title" i18n="options_hide_referrer_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_hide_referrer_desc"></span>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="hide_referrer"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="hide_search_queries" class="title" i18n="options_hide_search_queries_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_hide_search_queries_desc"></span>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="hide_search_queries"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="send_not_track" class="title" i18n="options_send_not_track_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_send_not_track_desc"></span>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="send_not_track"/>
                            </div>
                        </div>
                    </li>
                    <li style="display: none">
                        <div class="opt-desc">
                            <label tabindex="0" for="remove-client-data" class="title" i18n="options_remove_client_data_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_remove_client_data_desc"></span>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="remove-client-data"/>
                            </div>
                        </div>
                    </li>
                    <li style="display: none">
                        <div class="opt-desc">
                            <label tabindex="0" for="disable_webrtc" class="title" i18n="options_disable_webrtc_title"></label>
                            <div class="opt-state">
                                <span class="sp-table-row-info desc" i18n="options_disable_webrtc_description"></span>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="disable_webrtc"/>
                            </div>
                        </div>
                    </li>
                    <li class="opt-textarea">
                        <div class="opt-textarea__in">
                            <div class="opt-desc">
                                <label tabindex="0" for="strip_tracking_params" class="title" i18n="options_strip_tracking_params_title"></label>
                                <div class="opt-state">
                                    <span class="sp-table-row-info desc" i18n="options_strip_tracking_params_desc"></span>
                                </div>
                            </div>
                            <div class="opt-state input">
                                <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                    <input type="checkbox" class="sp-table-row-input" id="strip_tracking_params"/>
                                </div>
                            </div>
                        </div>
                        <textarea rows="4" class="opt-textarea__item" id="strip_tracking_params_input"></textarea>
                    </li>
                </ul>
            </div>
        </div>

        <div id="whitelist" class="settings-content tab-pane">
            <div class="settings-content">
                <div class="page-title" i18n="options_whitelist"></div>
                <div class="settings-body">
                    <div class="setting-desc" i18n="options_whitelist_description"></div>
                    <ul class="opts-list">
                        <li>
                            <div class="opt-desc">
                                <label tabindex="0" for="changeDefaultWhiteListMode" class="title" i18n="options_whitelist_inverse"></label>
                                <div class="opt-state">
                                    <div class="sp-table-row-info desc" i18n="options_whitelist_inverse_desc"></div>
                                </div>
                            </div>
                            <div class="opt-state input">
                                <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                    <input type="checkbox" class="sp-table-row-input" id="changeDefaultWhiteListMode"/>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="filter-rules">
                    <div id="whiteListRules" class="user-rules"></div>
                </div>
                <div class="settings-actions">
                    <input type="file" id="importWhiteListInput" style="display: none;" accept=".txt, text/plain"/>
                    <a class="button button--green button--link" id="whiteListFiltersImport" href="#" i18n="options_userfilter_import"></a>
                    <a class="button button--green-bd button--link disabled" id="whiteListFiltersExport" href="#" i18n="options_userfilter_export"></a>
                    <div class="filter-rules__label" id="whiteListRulesSaveIndicator"></div>
                </div>
            </div>
        </div>

        <div id="userfilter" class="settings-content tab-pane">
            <div class="settings-content">
                <div class="page-title" i18n="options_userfilter"></div>
                <div class="settings-body">
                    <div class="setting-desc" i18n="options_userfilter_description"></div>
                </div>
                <div class="filter-rules">
                    <div id="userRules" class="user-rules"></div>
                </div>
                <div class="settings-actions">
                    <input type="file" id="importUserFilterInput" style="display: none;" accept=".txt, text/plain"/>
                    <a id="userFiltersImport" href="#" i18n="options_userfilter_import" class="button button--green button--link"></a>
                    <a id="userFiltersExport" href="#" i18n="options_userfilter_export" class="button button--green-bd button--link disabled"></a>
                    <div class="filter-rules__label" id="userRulesSaveIndicator"></div>
                </div>
            </div>
        </div>

        <div id="miscellaneous-settings" class="settings-content tab-pane">
            <div class="page-title" i18n="options_miscellaneous_settings"></div>
            <div class="settings-body">
                <ul class="opts-list">
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="useOptimizedFilters" class="title" i18n="options_use_optimized_filters"></label>
                            <div class="opt-state">
                                <div class="opt-state">
                                    <div class="sp-table-row-info desc" i18n="options_use_optimized_filters_desc"></div>
                                </div>
                            </div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="useOptimizedFilters"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="opt-desc">
                                <label tabindex="0" for="integrationModeCheckbox" class="title" i18n="options_disable_integration_mode"></label>
                                <div class="opt-state">
                                    <div class="sp-table-row-info desc">
                                        <a class="opt-state__link" href="https://adguard.com/forward.html?action=integration_mode_kb&from=options_screen&app=browser_extension" target="_blank" i18n="options_learn_more"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="opt-state"></div>
                        </div>
                        <div class="opt-state input">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="integrationModeCheckbox"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="enableHitsCount" class="title" i18n="options_collect_hit_stats"></label>
                            <div class="opt-state">
                                <div class="sp-table-row-info desc">
                                    <a class="opt-state__link" href="https://adguard.com/forward.html?action=filter_rules&from=options_screen&app=browser_extension" target="_blank" i18n="options_learn_more"></a>
                                </div>
                            </div>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="false" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="enableHitsCount"/>
                            </div>
                        </div>
                    </li>
                    <li class="active">
                        <div class="opt-desc">
                            <label tabindex="0" for="enableShowContextMenu" class="title" i18n="options_show_context_menu"></label>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="enableShowContextMenu"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="showInfoAboutAdguardFullVersion" class="title" i18n="options_show_adguard_full_version"></label>
                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="showInfoAboutAdguardFullVersion"/>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="opt-desc">
                            <label tabindex="0" for="showAppUpdatedNotification" class="title" i18n="options_show_app_updated_notification"></label>

                        </div>
                        <div class="opt-state">
                            <div class="toggler-wr" role="checkbox" aria-checked="true" tabindex="0">
                                <input type="checkbox" class="sp-table-row-input" id="showAppUpdatedNotification"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="settings-actions">
                <a id="openLog" href="#" i18n="options_open_log" class="button button--green button--link"></a>
                <a id="resetStats" href="#" i18n="options_reset_stats" class="button button--green-bd button--link"></a>
                <a href="https://github.com/AdguardTeam/AdguardBrowserExtension/releases" class="button button--green-bd button--link" target="_blank" i18n="options_open_changelog"></a>
            </div>
        </div>

        <div id="sync" class="settings-content tab-pane">
            <div class="page-title">
                Sync
            </div>
            <div id="unauthorizedBlock" class="account account--active">
                <div class="account__desc">
                    <div class="subtitle settings-body-subtitle">
                        Take your AdGuard settings with you !
                    </div>
                    <div class="setting-desc">
                        Synchronize your user filter, filter settings, and preferences, across all your devices
                    </div>
                </div>
                <div class="account__control">
                    <div class="account__avatar">
                        <div class="account__avatar-pic"></div>
                    </div>
                    <div class="account__control-in">
                        <div class="subtitle-2 sync-ntn">
                            Connect with <button id="selectProviderButton" class="btn-inline-arrow">AdGuard account</button>
                            <div id="selectProviderDropdown" class="dropdown dropdown--sync" style="display: none;">
                                <div id="adguardSelectProvider" class="dropdown__item dropdown__item--adguard">
                                    AdGuard account
                                </div>
                                <div id="dropboxSelectProvider" class="dropdown__item dropdown__item--dropbox">
                                    Dropbox account
                                </div>
                                <div id="browserStorageSelectProvider" class="dropdown__item dropdown__item--chrome">
                                    Chrome account
                                </div>
                            </div>
                        </div>
                        <div class="account__btns">
                            <button id="signInButton" class="button button--green account__btn">
                                Sign in
                            </button>
                            <button id="startSyncButton" class="button button--green account__btn">
                                Start sync
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="authorizedBlock" class="account">
                <div class="account__control account__control-authorized">
                    <div class="account__avatar">
                        <div class="account__avatar-pic"></div>
                    </div>
                    <div class="account__control-in">
                        <div id="providerNameInfo" class="subtitle-2">
                            Pankich@mail.ru
                        </div>
                        <span id="lastSyncTimeInfo"></span>
                        <div class="account__btns">
                            <!--TODO поменять линк, как будет готов auth service-->
                            <a href="https://adguard.com/forward.html?action=options_login&from=options_screen&app=browser_extension" target="_blank" id="manageAccountButton"
                               class="button button--green manage-account-btn account__btn" i18n="sync_manage_account_button_text"></a>
                            <button id="signOutButton" class="button button--transparent account__btn">
                                Disconnect
                            </button>
                            <button id="syncNowButton" class="button button--green account__btn">
                                Sync now
                            </button>
                        </div>
                    </div>
                </div>
                <form class="settings-form settings-checkboxes" action="#">
                    <div class="subtitle-2">
                        Sync settings:
                    </div>
                    <div class="settings-checkboxes__in">
                        <div class="settings-checkboxes__item">
                            <input id="sync-general-settings-checkbox" type="checkbox" class="settings-checkboxes__checkbox">
                            <label for="sync-general-settings-checkbox" class="settings-checkboxes__label">
                                General settings
                            </label>
                        </div>
                        <div class="settings-checkboxes__item">
                            <input id="sync-filters-checkbox" type="checkbox" class="settings-checkboxes__checkbox">
                            <label for="sync-filters-checkbox" class="settings-checkboxes__label">
                                Filters
                            </label>
                        </div>
                        <div class="settings-checkboxes__item">
                            <input id="sync-extension-specific-checkbox" type="checkbox" class="settings-checkboxes__checkbox">
                            <label for="sync-extension-specific-checkbox" class="settings-checkboxes__label">
                                Extension specific settings
                            </label>
                        </div>
                    </div>
                </form>
                <form id="deviceNameBlock" style="display: none;" class="settings-form" action="#">
                    <div class="subtitle-2">
                        Device name
                    </div>
                    <div class="settings-form__in">
                        <input id="deviceNameInput" class="settings-form__input" type="text" placeholder="Enter your device name">
                        <input id="changeDeviceNameButton" class="button button--transparent" type="submit" value="Change device name">
                    </div>
                </form>
            </div>
            <div class="app-download">
                <div class="app-download__desc">
                    Download AdGuard  to sync with your mobile device. Availibale at:
                </div>
                <!--@TODO указать хрефы -->
                <a href="#" class="btn-app-store"></a>
                <a href="#" class="btn-google-play"></a>
            </div>
        </div>

        <!--about section-->
        <div id="about" class="settings-content tab-pane">
            <div class="page-title" i18n="options_about"></div>
            <div class="settings-content">
                <div class="settings-body">
                    <div class="about-opt">
                        <div class="logo about-opt__logo"><img src="images/logo.svg" alt=""></div>
                        <div class="about-opt__desc">
                            <div id="about-version-placeholder" class="about-opt__version">
                            </div>
                            <div class="about-opt__desc">
                                <div class="about-opt__desc-item">
                                    © 2009-2019 AdGuard Software Ltd.
                                </div>
                                <div class="about-opt__desc-item">
                                    <span i18n="options_copyright"></span>
                                </div>
                            </div>
                        </div>
                        <div class="about-opt__menu">
                            <a target="_blank"
                               href="https://adguard.com/forward.html?action=eula&from=options_screen&app=browser_extension"
                               i18n="options_license_agreement" class="about-opt__menu-item"></a>
                            <a target="_blank"
                               href="https://adguard.com/forward.html?action=privacy&from=options_screen&app=browser_extension"
                               i18n="options_privacy_policy" class="about-opt__menu-item"></a>
                            <a target="_blank"
                               href="https://adguard.com/forward.html?action=acknowledgments&from=options_screen&app=browser_extension"
                               i18n="options_acknowledgment" class="about-opt__menu-item"></a>
                            <a target="_blank"
                               href="https://adguard.com/forward.html?action=github_options&from=options_screen&app=browser_extension"
                               i18n="options_github" class="about-opt__menu-item"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="settings-footer">
        <div class="rate-row">
            <div class="wlimit">
                <div class="text" i18n="options_do_you_like"></div>
                <a href="#" class="btn-rate openExtensionStore"><img src="images/icon-like.svg" alt=""><span i18n="options_footer_like_us"></span></a>
            </div>
        </div>
        <div class="links-row">
            <div class="wlimit">
                <div class="copy">
                    <img src="images/icon-logo-white.svg" alt="">
                    &copy; AdGuard, 2009-2019
                </div>
                <div class="links">
                    <a href="https://adguard.com/forward.html?action=adguard_site&from=options_screen_footer&app=browser_extension" target="_blank" i18n="options_site"></a>
                    <a href="https://adguard.com/forward.html?action=discuss&from=options_screen&app=browser_extension" target="_blank" i18n="options_discuss"></a>
                    <a href="https://adguard.com/forward.html?action=github_options&from=options_screen&app=browser_extension" target="_blank" i18n="options_github"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="resetStatsPopup" class="alert-attention updates-filter-popup" style="display: none;">
    <div class="alert-attention-title" i18n="options_reset_stats_done"></div>
</div>

<div id="tooManySubscriptions" class="alert-topline" style="display: none;">
    <div class="wrap">
        <p i18n="options_too_many_filters_selected"></p>
    </div>
</div>

</body>
</html>
